<template>
  <div class="dashboard-container">
    <!-- 顶部展示栏 -->
    <el-row class="top-nav">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div data-v-21774eff="" class="header">
              <span data-v-21774eff="">总销售额</span
              ><i
                data-v-21774eff=""
                class="el-tooltip el-icon-warning item"
                aria-describedby="el-tooltip-477"
                tabindex="0"
              ></i>
            </div>
            <!-- 总销售 -->
            <div data-v-21774eff="" class="total">¥ 126,560</div>
            <!-- 极度统计 -->
            <div data-v-21774eff="" class="trends">
              <span data-v-21774eff=""
                >周同比 12%
                <i data-v-21774eff="" class="el-icon-caret-top"></i></span
              ><span data-v-21774eff=""
                >日环比 11%
                <i data-v-21774eff="" class="el-icon-caret-bottom"></i
              ></span>
            </div>
            <div data-v-21774eff="" class="hr"></div>
            <!-- 底部 -->
            <div data-v-21774eff="" class="footer">
              <span data-v-21774eff="">日均销售额</span>
              <span data-v-21774eff="">￥12,423</span>
            </div>
          </el-card>
        </div>
      </el-col>
      <!-- 第二个完成 -->
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div data-v-21774eff="" class="header">
              <span data-v-21774eff="">访问量</span
              ><i
                data-v-21774eff=""
                class="el-tooltip el-icon-warning item"
                aria-describedby="el-tooltip-477"
                tabindex="0"
              ></i>
            </div>
            <comment-Item />
            <div data-v-21774eff="" class="hr"></div>
            <div data-v-21774eff="" class="footer">
              <span data-v-21774eff="">日访问量</span>
              <span data-v-21774eff="">1,234</span>
            </div>
          </el-card>
        </div>
      </el-col>
      <!-- 第二个 -->
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div data-v-21774eff="" class="header">
              <span data-v-21774eff="">支付笔数</span
              ><i
                data-v-21774eff=""
                class="el-tooltip el-icon-warning item"
                aria-describedby="el-tooltip-477"
                tabindex="0"
              ></i>
            </div>
            <comment-List />
            <div data-v-21774eff="" class="hr"></div>
            <div data-v-21774eff="" class="footer">
              <span data-v-21774eff="">转化率</span>
              <span data-v-21774eff="">1,234</span>
            </div>
          </el-card>
        </div>
      </el-col>
      <!-- 第二个结束 -->
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div data-v-21774eff="" class="header">
              <span data-v-21774eff="">运营活动效果</span
              ><i
                data-v-21774eff=""
                class="el-tooltip el-icon-warning item"
                aria-describedby="el-tooltip-477"
                tabindex="0"
              ></i>
            </div>
            <comment-Index />
            <div data-v-21774eff="" class="hr"></div>
            <div data-v-21774eff="" class="trends">
              <span data-v-21774eff=""
                >周同比 12%
                <i data-v-21774eff="" class="el-icon-caret-top"></i></span
              ><span data-v-21774eff=""
                >日环比 11%
                <i data-v-21774eff="" class="el-icon-caret-bottom"></i
              ></span>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <!-- 底部栏展示 -->
    <el-card class="style">
      <el-tabs v-model="activeName" @tab-click="handleSetLineChartData">
        <el-tab-pane label="销售额" name="first" class="fx1">
          <div class="fx2">
            <comment-Reply />
          </div>
          <div class="fx3">
            <div data-v-21774eff="" class="table">
              <h4 data-v-21774eff="">门店销售额排名</h4>
              <ul data-v-21774eff="">
                <li>
                  <el-row
                    class="row"
                    v-for="(item, index) in salesTable"
                    :key="'sals-' + index"
                  >
                    <el-col :span="3"
                      ><div
                        v-bind:class="[item.num > 3 ? 'light' : 'circular']"
                      >
                        {{ item.num }}
                      </div></el-col
                    >
                    <el-col :span="16">{{ item.title }}</el-col>
                    <el-col :span="5">{{ item.val }}</el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="访问量" name="second" class="fx1">
          <div class="fx2">
            <comment-Get />
          </div>
          <div class="fx3">
            <div data-v-21774eff="" class="table">
              <h4 data-v-21774eff="">门店销售额排名</h4>
              <ul data-v-21774eff="">
                <li>
                  <el-row
                    class="row"
                    v-for="(item, index) in salesTable"
                    :key="'sals-' + index"
                  >
                    <el-col :span="3"
                      ><div
                        v-bind:class="[item.num > 3 ? 'light' : 'circular']"
                      >
                        {{ item.num }}
                      </div></el-col
                    >
                    <el-col :span="16">{{ item.title }}</el-col>
                    <el-col :span="5">{{ item.val }}</el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="block">
        <el-date-picker
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </div>
    </el-card>
  </div>
</template>

<script>
const lineChartData = {
  newVisitis: {
    expectedData: [
      100,
      120,
      161,
      134,
      105,
      160,
      165,
      100,
      120,
      161,
      134,
      105,
      160,
      165,
    ],
    actualData: [
      120,
      82,
      91,
      154,
      162,
      140,
      15,
      120,
      82,
      91,
      154,
      162,
      140,
      145,
    ],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
};
import CommentItem from "./components/comment-item";
import CommentList from "./components/comment-list";
import CommentIndex from "./components/comment-index";
import CommentReply from "./components/comment-reply";
import CommentGet from "./components/comment-get";
export default {
  name: "ArticleIndex",
  components: {
    CommentItem,
    CommentList,
    CommentIndex,
    CommentReply,
    CommentGet,
  },

  props: {},
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      activeName: "first",
      salesTable: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    for (let i = 1; i < 9; i++) {
      this.salesTable.push({
        num: i,
        title: `工专路 ${i} 号店`,
        val: "323,234",
      });
    }
  },
  mounted() {},
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type.name];
    },
    // 第二个
  },
};
</script>

<style lang="less" scoped>
/deep/.fx2 canvas {
  position: absolute;
  left: -20px !important;
  top: 13px !important;
  width: 845px !important;
  height: 330px !important;
  user-select: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 0px;
  margin: 0px;
  border-width: 0px;
}
/deep/.table ul li div {
  margin-bottom: 5px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
}
.light {
  width: 17px;
  height: 17px;
  background-color: #f5f5f5;
  color: #000;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  border-radius: 50%;
}
.circular {
  width: 20px;
  height: 20px;
  background-color: #314659;
  color: #fff !important;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  border-radius: 50%;
  font-size: 14px;
}
.fx1 {
  display: flex;
}
.fx2 {
  flex: 1.5;
}
.fx3 {
  flex: 2;
}
.block {
  position: absolute;
  right: 20px;
  top: 15px;
}
.box-card .trends span i {
  color: red;
}
.box-card .trends span:last-child i {
  color: green;
}
.box-card .header span {
  color: #97a8be;
  font-size: 14px;
}
i {
  color: #97a8be;
}
.box-card .hr {
  border-top: 1px solid #e8e8e8;
  margin: 0 0 10px 0;
}
/deep/.top-nav .grid-content {
  padding: 0 5px !important;
}
.chart {
  border-bottom: 1px solid #ccc;
}
.dashboard-container {
  padding: 13px;

  .top-nav {
    .grid-content {
      padding: 0 10px;
      .box-card {
        min-height: 230px;
        /deep/ .el-card__body {
          padding: 5px 20px;
        }
        #twoecharts,
        #oneecharts {
          width: 253px;
          height: 160px;
          border-bottom: 1px solid #ccc;
        }

        .header {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .box-card .total {
    font-size: 30px;
    height: 140px;
    line-height: 140px;
    padding-left: 20px;
  }
  .box-card .trends {
    height: 22px;
    font-size: 14px;
  }
  .box-card .footer span {
    font-size: 14px;
    line-height: 22px;
  }
  .box-card .footer span:last-child {
    margin-left: 8px;
    color: rgba(0, 0, 0, 0.85);
  }
  .style {
    position: relative;
    margin-top: 15px;
  }
  .style .el-date-editor {
    width: 300px;
    height: 36px;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}
</style>
